<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS计数器</title>
    <style>
        ul {
            list-style-type: none;
        }
        ul.demo-1 {
            list-style-type: none;
            counter-reset: counter-1;
        }
        
        ul.demo-1 li::before {
            counter-increment: counter-1;
            content: counter(counter-1, lower-roman)'.'
        }
        
        .demo-2 {
            counter-reset: counter-2;
        }
        
        .demo-2 li {
            counter-increment: counter-2;
        }
        
        .demo-2 li::before {
            content: counter(counter-2)'. '
        }
    </style>
</head>

<body>
    <ul class="demo-1">
        <li>苹果</li>
        <li>香蕉</li>
        <li>桔子</li>
        <li>梨</li>
    </ul>

    <ul class="demo-2">
        <li>南方水果
            <ul>
                <li>芒果</li>
                <li>菠萝</li>
                <li>甘蔗</li>
                <li>香蕉</li>
            </ul>
        </li>
        <li>北方水果
            <ul>
                <li>苹果</li>
                <li>梨</li>
                <li>西瓜</li>
            </ul>
        </li>
        <li>进口水果
            <ul>
                <li>提子</li>
                <li>火龙果</li>
                <li>奇异果</li>
            </ul>
        </li>
    </ul>
</body>

</html>